<template>
  <el-select
    popper-class="virtual-list"
    :size="size"
    clearable
    :multiple="multiple"
    v-model="select_value"
    v-loadmore="loadMore"
    :collapse-tags="multiple"
    filterable
    :filter-method="handleFilter"
    ref="virtualList"
    @visible-change="handleVisible"
    @change="handleChage"
  >
    <el-option
      v-for="item in visibleList "
      :key="obj? item.id: item"
      :value="obj? item.id: item"
      :label="obj? item.name: item"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
    },
    size: {
      type: String,
    },
    value: {
    },
    multiple: {
        type: Boolean,
        default: false
    },
    obj: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      visibleList: [],
      select_value: this.value,
      ulEl: null,
      visibleView: null,
      scrollView: null,
      scrollTop: 0,
      listAll: []
    };
  },
  mounted() {
    const el = this.$refs.virtualList.$el;
    this.ulEl = el.querySelector(
      ".virtual-list .el-select-dropdown__wrap.el-scrollbar__wrap .el-scrollbar__view.el-select-dropdown__list"
    );
    this.visibleView = el.querySelector(".virtual-list .visible-list")
    this.scrollView = el.querySelector(".virtual-list .el-select-dropdown__wrap.el-scrollbar__wrap")
    this.listAll = [...this.list]
    const height = this.listAll.length * 34;
    this.visibleList = this.listAll.slice(0, 8);
    this.visibleView.style.height = height + "px";
    this.ulEl.style.transform = "translateY(0px)";
  },
  methods: {
    loadMore(firstIndex, secondIndex, scrollTop) {
      this.visibleList = this.listAll.slice(firstIndex, secondIndex);
      this.ulEl.style.transform = `translateY(${firstIndex * 34}px)`;
      this.scrollTop = scrollTop;
    },
    handleVisible(value) {
        if (value) {
            this.ulEl.style.transform = "translateY(0px)";
            this.visibleList = this.listAll.slice(0, 8);
        }
    },
    handleFilter(value) {
        this.listAll = this.list.filter((item) => {
            if (this.obj) {
                return item.name.indexOf(value) >= 0
            } else {
                return item.indexOf(value) >= 0
            }
        })
        const height = this.listAll.length > 6 ? this.listAll.length * 34 : 7*34;
        this.visibleList = this.listAll.slice(0, 8);
        this.visibleView.style.height = height + "px";
        this.ulEl.style.transform = "translateY(0px)";
    },
    handleChage(value) {
        this.$emit('selectValue', value)
    }
  },
  watch: {
    list: function (val) {
      this.listAll = [...this.list]
      const height = this.listAll.length * 34;
      this.visibleList = this.listAll.slice(0, 8);
      this.visibleView.style.height = height + "px";
      this.ulEl.style.transform = "translateY(0px)";
    },
    value: function(val) {
        this.select_value = val
    }
  },
};
</script>

<style>
</style>